<template>
 <div class="je-login">
  <div class="con">
    <div class="head">
      <div class="top" >
        <a href="/" >
           <img src="http://boot.jeecg.com/img/logo.07b1638a.svg" alt="" width="50" height="50">
      <h1>Jeccg Bost</h1>
       </a>
      </div>
      <div class="but">
        <h4>Jeecg Boot 是中国最具影响力的 企业级 快速开发平台</h4>
      </div>
    </div>
    <div class="conten">
      <el-form :model="formData" :rules="rules" ref="submitForm">
        <span>账号密码登录</span>&nbsp;&nbsp;&nbsp;<span>手机号登录</span>
       <el-form-item prop='username' >
         <el-input v-model="formData.username"></el-input>
       </el-form-item>
         <el-form-item prop='password' >
         <el-input v-model="formData.password" ></el-input>
       </el-form-item>
       <el-checkbox v-model="formData.checked">自动登录</el-checkbox>
       <el-form-item>
         <el-button type="primary" @click.stop="handleSubmit('submitForm')">确定</el-button>
       </el-form-item>
      </el-form>
    </div>
    <div class="foot"></div>
  </div>
 </div>
</template>

<script>



export default {
  name: 'Login',
   components: {},
  data:function(){
    return{
      formData:{
        username:'',
        password:'',
        checked:true,
      },
      rules:{
        username:{required:true,message:'输入不能为空',trigger:'blur'},
        password:{required:true,message:'输入不能为空',trigger:'blur'},
      },
      
      }
    },
    methods: {
     handleSubmit: function (formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$axios.post("/login",{
              username:this.formData.username,
              password:this.formData.password,
            })
            .then((res) => {
              console.log(res);
              if(res.stauts===1){
                this.$message({
                  message:"登录成功",
                  type:'success'
                })
              } else{
                 this.$message({
                   message: '登录错误',
                type: 'warning'
        });
              }
            })
          } else {
            console.log('账号密码错误!!');
            return false;
          }
        });
      },
 }
 }
  
 
</script>
<style lang='less'>
.je-login{
.con{
  position: absolute;
 top: 10%;
 left: 35%;
 
 .head{
   .top{
     a{
       cursor: pointer;
         display: flex;
        text-decoration:none;
         
       h1{
         font-weight: 500;
         text-align: center;
         font-size: 40px;

       }
     }
   }
   .but{
     display: flex;
     h4{
       font-weight: 100;
       font-size: 14;
     }
   }
 }
}
}

</style>
